<template>
  <vxe-table ref="tableRef" :data="data" border :round="true" maxHeight="300">
    <vxe-column field="order_item_id" title="ID" fixed="left" min-width="80" />
    <vxe-column field="ItemImgUrl" title="图片" width="76">
      <template #default="{ row }">
        <el-image :src="row.ItemImgUrl" width="68" style="border: 0.5px solid #f0f0f0; border-radius: 4px">
          <template #error>
            <img src="~@/assets/images/null-img.png" alt="" />
          </template>
        </el-image>
      </template>
    </vxe-column>
    <vxe-column title="SKU 自定义SKU" field="sku" width="150">
      <template #header>
        <div>
          <div>SKU</div>
          <div>自定义SKU</div>
        </div>
      </template>
      <template #default="{ row }">
        <p>{{ row.SKU }}</p>
        <p>{{ row.SellerSKU }}</p>
      </template>
    </vxe-column>

    <vxe-column title="渠道SKU/ASIN" width="150">
      <template #default="{ row }">
        <p>{{ row.ClientSKU || "-" }}</p>
        <p>{{ row.ASIN || "-" }}</p>
      </template>
    </vxe-column>

    <vxe-column title="产品名称" field="ItemTitleCn" width="180">
      <template #default="{ row }">
        <VText :value="row.ItemTitleCn" :line="3" />
      </template>
    </vxe-column>

    <vxe-column title="产品销售收入（不含税）" field="ProductNum" width="180">
      <template #default="{ row }">
        <p>{{ (row.ProductNum * row.ProductPrice)?.toFixed(2) }}</p>
      </template>
    </vxe-column>
    <vxe-column title="运费收入（不含税）" field="ShippingPrice" width="150"></vxe-column>

    <vxe-column title="数量/已退数量" field="todo" width="120">
      <template #default="{ row }">
        <p>{{ row.ProductNum || "-" }}/{{ row.RefundedNum || "0" }}</p>
      </template>
    </vxe-column>
    <vxe-column title="退款数量" width="86" fixed="right">
      <template #default="{ row }">
        <el-input-number style="width: 70px" v-model="row.RefundNum" :max="row.max" :controls="false" :min="0" :precision="0" :disabled="disabled" @change="countChange(row)"></el-input-number>
      </template>
    </vxe-column>

    <vxe-column title="操作" width="60" fixed="right">
      <template #default="{ row, $index }">
        <el-button type="danger" link v-if="data.length > 1" @click="dtl($index)">删除</el-button>
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  data: { type: Array, default: () => [] },
  disabled: { type: Boolean, default: false },
})

const emit = defineEmits(["update:modelValue", "refresh", "updateAmount"])

const tableRef = ref()

const getTableData = () => {
  return tableRef?.value.getTableData()
}
const dtl = (idx) => {
  props.data.splice(idx, 1)
  countAmount()
}
const countChange = (row) => {
  if (row.RefundNum > row.ProductNum) {
    row.RefundNum = row.ProductNum
  }
  countAmount()
}
const countAmount = () => {
  let count = 0
  console.log(props.data)

  props.data.forEach((v) => {
    count += v.ProductPrice * (v.RefundNum || 0)
  })
  console.log(count)

  emit("updateAmount", count)
}

defineExpose({
  getTableData,
})
</script>
<style lang="scss" scoped>
.sku-title {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 3; //行数
  line-clamp: 3;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
}
</style>
